// import { DrawScene, DrawControl } from "bmap-draw";

import { ref } from "vue";

const activeStyle = {
  strokeWeight: 5,
  strokeOpacity: 1,
  strokeColor: "#ad70eb",
  fillColor: "#d6b0fd",
  fillOpacity: 0.3,
};

const norStyle = {
  strokeWeight: 5,
  strokeOpacity: 1,
  strokeColor: "blue",
  fillColor: "blue",
  fillOpacity: 0.5,
};

const labelOptions = {
  borderRadius: "2px",
  background: "#b5d3fb",
  border: "1px solid #b5d3fb",
  color: "#333",
  fontSize: "12px",
  letterSpacing: "0",
  padding: "5px",
};

const fields = ["code", "name", "color", "center"];

function init(map, callback = () => {}) {
  import("bmap-draw").then((model) => {
    let scene;
    let markerDraw, polylineDraw, polygonDraw;
    let {
      DrawScene,
      MarkerDraw,
      PolylineDraw,
      PolygonDraw,
      PolygonEdit,
      Select,
      DrawingType,
      OperateEventType,
      PolygonMove,
    } = model;

    // 添加鼠标绘制控件
    scene = new DrawScene(map, {
      isSeries: false,
      enableSnap: true,
      baseOpts: {
        enableDragging: true,
      },
    });

    let seletOvs = ref([]);

    const movepoy = new PolygonMove(scene);
    movepoy.setCurrentModel(PolygonMove.MODEL.MOVE);

    const polygonEdit = new PolygonEdit(scene);

    const comSelect = new Select(scene, {
      type: DrawingType.DRAWING_RECTANGLE,
    });
    comSelect.addEventListener(OperateEventType.COMPLETE, (e) => {
      let result = intersect(scene.instances, e.target.overlay);
      scene.instances.forEach((item) => {
        item.setOptions(norStyle);
      });
      if (result instanceof Array) {
        result.forEach((item) => {
          item.setOptions(activeStyle);
        });
        seletOvs.value = result;
      }
    });

    function intersect(overlays = [], selectOverlay) {
      if (!selectOverlay) {
        return [];
      }
      let maxLng = 0;
      let minLng = 99999999;
      let maxLat = 0;
      let minLat = 99999999;
      selectOverlay.points.forEach((point) => {
        maxLng = Math.max(maxLng, point.lng);
        minLng = Math.min(minLng, point.lng);
        maxLat = Math.max(maxLat, point.lat);
        minLat = Math.min(minLat, point.lat);
      });

      return overlays.filter((item) => {
        for (const index in item.points) {
          let point = item.points[index];
          if (
            point.lng < maxLng &&
            point.lng > minLng &&
            point.lat < maxLat &&
            point.lat > minLat
          ) {
            return true;
          }
        }
        return false;
      });
    }

    function createPolygon(points) {
      let pointArr = points.map((item) => new BMapGL.Point(item[0], item[1]));
      return new BMapGL.Polygon(pointArr, norStyle);
    }

    function createLine(points) {
      let pointArr = points.map((item) => new BMapGL.Point(item[0], item[1]));
      return new BMapGL.Polyline(pointArr, norStyle);
    }

    callback({
      openMove() {
        movepoy.close();
        if (seletOvs.value[0]) {
          movepoy.open(seletOvs.value[0]);
        }
      },
      renderGeoJson(geoJson = {}) {
        if (!geoJson.features) {
          return;
        }
        geoJson.features.forEach((feature) => {
          let points = feature.geometry.coordinates;
          let overlay;
          if (feature.geometry.type === "Polygon") {
            overlay = createPolygon(points[0]);
          }
          if (feature.geometry.type === "LineString") {
            overlay = createLine(points);
          }
          if (feature.geometry.type === "Point") {
            overlay = new BMapGL.Marker(
              new BMapGL.Point(points[0], points[1]),
              {
                enableDragging: true,
              }
            );
          }

          overlay.properties = feature.properties || {};
          overlay.properties.center = overlay.properties.center || [];

          scene.addOverlay(overlay);
          map.addOverlay(overlay);
        });
      },
      addHistoryData(overlay) {
        scene.addOverlay(overlay);
      },
      getSelects() {
        return seletOvs;
      },
      toGeoJson() {
        return scene.instances.map((item) => {
          let geoJson = item.toGeoJSON();
          geoJson.properties = item.properties;
          return geoJson;
        });
      },
      openSelect() {
        comSelect.open();
      },
      openEdit() {
        // 打开面编辑
        if (seletOvs.value[0]) {
          polygonEdit.open(seletOvs.value[0]);
        }
      },
      openPolygonDraw() {
        if (!polygonDraw) {
          polygonDraw = new PolygonDraw(scene, {
            labelOptions,
            baseOpts: norStyle,
            enableDragging: true,
            enableSnap: true,
            isSeries: false,
          });
        }
        polygonDraw.open();
      },
      closePolygonDraw() {
        if (polygonDraw) {
          polygonDraw.close();
        }
      },
      openPolylineDraw() {
        if (!polylineDraw) {
          polylineDraw = new PolylineDraw(scene, {
            labelOptions,
            baseOpts: norStyle,
            enableDragging: true,
            enableSnap: true,
            isSeries: false,
          });
        }
        polylineDraw.open();
      },
      closePolylineDraw() {
        if (polylineDraw) {
          polylineDraw.close();
        }
      },
      openMarkerDraw() {
        if (!markerDraw) {
          markerDraw = new MarkerDraw(scene, {
            isSeries: false,
            enableDragging: true,
            enableSnap: true,
            baseOpts: {},
          });
        }
        markerDraw.open();
      },
      closeMarkerDraw() {
        if (markerDraw) {
          markerDraw.close();
        }
      },
      clear() {
        scene.clearData();
      },
    });
  });
}

export default init;
